<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <script>
    /* console.time('耗时')
    for (let i = 1; i <= 1000; i++) {
      document.body.innerHTML = document.body.innerHTML + `<div>${i}</div>`
    }
    console.timeEnd('耗时') // 1586.053955078125 ms */

    /* console.time('耗时')
    let str = ''
    for (let i = 1; i <= 1000; i++) {
      str += `<div>${i}</div>`
    }
    document.body.innerHTML = str
    console.timeEnd('耗时') // 2.5810546875 ms */

    /* console.time('耗时')
    const arr = []
    for (let i = 1; i <= 1000; i++) {
      arr.push(`<div>${i}</div>`)
    }
    document.body.innerHTML = arr.join('')
    console.timeEnd('耗时') // 2.883056640625 ms */

    /* console.time('耗时')
    for (let i = 1; i <= 1000; i++) {
      const oDiv = document.createElement('div')
      // !更灵活
      oDiv.innerHTML = i
      oDiv.onclick = function () { }
      oDiv.style.backgroundColor = 'red'
      document.body.appendChild(oDiv)
    }
    console.timeEnd('耗时') // 7.409912109375 ms */

    /* console.time('耗时')
    // 篮子，“文档碎片”
    const oFrag = document.createDocumentFragment()
    for (let i = 1; i <= 1000; i++) {
      const oDiv = document.createElement('div')
      oDiv.innerHTML = i
      oFrag.appendChild(oDiv)
    }
    document.body.appendChild(oFrag)
    console.timeEnd('耗时') // 13.442138671875 ms

    const aDiv = document.querySelectorAll('div')
    console.log([...aDiv])
    console.log(Array.from(aDiv))

    // console.log(aDiv[Symbol.iterator])
    console.log(Array.prototype.slice.call(aDiv))
    console.log([].slice.call(aDiv))
    console.log([].__proto__.slice.call(aDiv)) */

    /* const obj = {
      0: 'a',
      1: 'b',
      length: 2
    };
    console.log(Array.from(obj))
    console.log([...obj]) //  */

    /* function fn(...args) {
      console.log(args)
      console.log(Array.prototype.slice.call(arguments).reduce((cur, acc) => acc + cur, 0))
    }

    fn(1, 3, 65, 7) */
    /* let a = 8
    function fn(a) {
      a = 9
    }
    fn(a)
    console.log(a) */

    /* let a = { age: 8 } */
    /* function fn(a) { */
    /*   a.age = 9 */
    /* } */
    /* fn(a) */
    /* console.log(a.age) */
    setTimeout(function () {
      console.log('~~~')
    }, 1000);
    // ...
    // while (true) { }
  </script>
</body>

</html>